<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../static/semantis-ui/semantic.min.css">
    <script type="text/javascript" src="../static/semantis-ui/jquery-3.6.0.js"></script>
    <script src="../static/semantis-ui/semantic.min.js"></script>

    <!--代码高亮-->
    <script src="../static/lib/prism/prism.js"></script>
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <title>详情</title>
</head>
<body>
<!--导航-->
<!--segment反转 inverted平铺 导航栏-->
<nav class="ui segment inverted attached segment me-padded-tb-mini bg">
    <!--放在一个container中-->
    <div class="ui container ">
        <!--里面的菜单   stackable适应手机-->
        <div class="ui inverted stackable menu bg">
            <h2 class="ui teal header item ">HJ&nbsp&nbspblog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="m-margin-tb-menu icon home"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i
                    class="m-margin-tb-menu folder open outline icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="m-margin-tb-menu edit outline icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="m-margin-tb-menu edit outline icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="m-margin-tb-menu meh outline icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide" th:replace="_fragments :: search">
                <form action="#" name="search" th:action="@{/search}" target="_blank" method="post">
                    <!--transparent透明-->
                    <div class="ui icon inverted transparent input">
                        <input type="text" name="query" placeholder="Search...." th:value="${query}">
                        <i class="search icon link" onclick="document.forms['search'].submit()"></i>
                    </div>
                </form>
            </div>

        </div>
    </div>
    <!--三条杠 更多按钮-->
    <a href="#" class="ui icon button menu toggle m-right-top bg white-font m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间-->
<div class="m-padded-d-mass">
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <!--详情页  更改中间内容就行-->


            <div class="ui top attached segment">
                <!--头部-->
                <div class="ui horizontal link list">
                    <div class="item">
                        <img src="https://picsum.photos/id/1000/100/100" alt="" th:src="@{${blog.user.avatar}}"
                             class="avatar ui image">
                        <div class="content"><a href="#" class=" header" th:text="${blog.user.nickname}">猪猪</a></div>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2021-5-4</span>
                    </div>
                    <div class="item">
                        <i class="eye icon"></i><span th:text="${blog.views}">2122</span>
                    </div>
                </div>
            </div>
            <div class="ui attached segment">
                <!--图片区域-->
                <img src="../static/image/back.png" th:src="@{${blog.firstPicture}}" alt=""
                     class="ui fluid rounded image">
            </div>
            <div class="ui attached segment">
                <!--内容-->
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
                </div>

                <h2 class="ui header center aligned" th:text="${blog.title}">储存在用户本地终端上的数据</h2>
                <!--这里使用text不专义  只能使用untext 才可以把Markdown格式转换过来-->
                <div class="content" th:utext="${blog.content}">
                    <p>Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。</p>
                    <p></p>
                    (1)Name/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌 [3]。
                    <p></p>
                    (2)Expires属性：设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，
                    仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效 [3] 。
                    <p></p>
                    (3)Path属性：定义了Web站点上可以访问该Cookie的目录。
                    <p></p>
                    (4)Domain属性：指定了可以访问该 Cookie 的 Web 站点或域。Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登
                    录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com
                    等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围。
                    <p></p>
                    <pre><code class="language-css">p { color: red }</code></pre>

                </div>

                <!--标签-->
                <div class="m-padded-lr">
                    <div class="ui teal basic left pointing label m-margin-tb-thin" th:each="tag : ${blog.tags}"
                         th:text="${tag.name}">
                        方法论
                    </div>
                </div>

                <!--basi去边线-->
                <div class="ui center aligned  basic segment">
                    <button id="payButton" class="ui orange circular basic button">赞赏</button>
                </div>

                <!--鼠标指会显示一下内容-->
                <div class="ui payQR flowing popup transition hidden">

                    <div class="ui orange basic label">
                        <!--images下面字体不会显示  使用style="font-size: inherit !important;"把字体提到最上面-->
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img src="../static/image/wo.jpg" th:src="@{/image/wo.jpg}" alt=""
                                     class="ui rounded bordered image"
                                     style="width: 120px">
                                <div>支付宝支付</div>
                            </div>
                            <div class="image">
                                <img src="../static/image/wo.jpg" th:src="@{/image/wo.jpg}" alt=""
                                     class="ui rounded bordered image"
                                     style="width: 120px">
                                <div>微信支付</div>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
            <div class="ui attached positive message">
                <!--博客信息-->
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <ui class="list">
                            <li>作者: <span th:text="${blog.user.nickname}">王锡豪</span><a href="#" th:href="@{/about}"
                                                                                       target="_blank">(联系作者)</a></li>
                            <li>发表时间: <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2020-05-26 09:08</span>
                            </li>
                            <li>版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)</li>
                            <li>公众号转载:请在文未添加作者公众号二维码</li>
                        </ui>
                    </div>
                    <div class="five wide column">
                        <img src="../static/image/wo.jpg" th:src="@{/image/wo.jpg}" alt=""
                             class="ui right floated rounded bordered image"
                             style="width: 110px">
                    </div>

                </div>
            </div>
            <div class=" ui bottom attached segment">
                <!--留言区域-->
                <div id="comment-container" class="ui teal segment" >
                    <div th:fragment="commentList">
                        <div class="ui comments">
                            <div >
                                <h3 class="ui dividing header">评论</h3>
                                <div class="comment" th:each="comment : ${comments}">
                                    <a class="avatar">
                                        <img src="../static/image/猫咪.png" th:src="@{${comment.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author" th:text="${comment.nickname}">Matt</a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">今天下午 5:42</span>
                                        </div>
                                        <div class="text" th:text="${comment.content}">太赞了！</div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnckname="Matt" th:attr="data-commentid=${comment.id},data-commentnckname=${comment.nickname}"
                                               onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                                <!--/*-->
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="../static/image/bg.png">
                                    </a>
                                    <div class="content">
                                        <a class="author">Elliot Fu</a>
                                        <div class="metadata">
                                            <span class="date">昨天上午12:30</span>
                                        </div>
                                        <div class="text">
                                            <p>這對我的研究是非常有用.謝謝!</p>
                                            <div class="actions">
                                                <a class="reply">Reply</a>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="../static/image/back.png">
                                    </a>
                                    <div class="content">
                                        <a class="author">Joe Henderson</a>
                                        <div class="metadata">
                                            <span class="date">5 天以前</span>
                                        </div>
                                        <div class="text">老兄，这太棒了。非常感谢。</div>
                                        <div class="actions">
                                            <a class="reply">Reply</a>
                                        </div>
                                    </div>
                                </div>
                                <!--*/-->
                            </div>
                        </div>
                    </div>
                </div>

                <form class="ui reply form">
                    <input type="hidden" name="blog.id" th:value="${blog.id}">
                    <input type="hidden" name="parentComment.id" value="-1">
                    <div class="field">
                        <textarea name="content" placeholder="请输入评论内容......"></textarea>
                    </div>
                    <div class="field input ui input">
                        <input type="text" name="email" placeholder="邮箱">
                    </div><br/>
                    <div class="field input ui input">
                        <input type="text" name="nickname" placeholder="姓名">
                    </div>
                    <div class="ui field labeled">
                        <button id="commentpost-btn" type="button" class="ui teal button"><i class="icon edit"></i>发布
                        </button>
                    </div>

                </form>
                <div id="errorMsg" style="color:red;text-align: center"></div>
                <div class="from">

                </div>


            </div>


        </div>
    </div>
</div>
<!--底部      m-padded-d-mass间隔-->
<footer class="ui segment inverted vertical segment m-padded-d-mass bg" th:replace="_fragments :: footer">
    <!--container容器 center aligned居中-->
    <div class="ui center aligned container bg">
        <!--grid会把一些布局分为12列  devided加线 -->
        <div class="ui inverted divided grid bg">
            <div class="three wide column m-opacity-mini m-text-space m-text-thin m-text-lined">
                <div class="ui inverted link list bg">
                    <img src="../static/image/wo.jpg" alt="" class="ui rounded image" style="width:110px">

                </div>
            </div>
            <div class="three wide column m-opacity-mini m-text-space m-text-thin m-text-lined">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list ">
                    <a href="#" class="item">会飞的羊</a>
                    <a href="#" class="item">会飞的羊</a>
                    <a href="#" class="item">会飞的羊</a>
                </div>
            </div>
            <div class="three wide column m-opacity-mini m-text-space m-text-thin m-text-lined">
                <h4 class="ui inverted header">联系我吖</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">QQ:822021336</a>
                    <a href="#" class="item">邮箱：xihao.luck@qq.com</a>
                    <a href="#" class="item"></a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-opacity-mini m-text-space m-text-thin m-text-lined">最新博客</h4>
                <p class="m-opacity-mini m-text-space m-text-thin m-text-lined">
                    这是我的个人博客，用于记录我在网上收集的文章，自己的代码笔记，和优秀的文案等等。欢迎大家关注！</p>
            </div>
        </div>
        <div class="ui inverted section divider m-opacity-mini m-text-space m-text-thin m-text-lined "></div>
        <p class="m-opacity-mini m-text-space m-text-thin m-text-lined">Copyright © 2021-2022 会飞的羊 </p>
    </div>

</footer>


<!--jquery-->

<script>
    <!--点击.menu.toggle按钮加入m-mobile-hide样式-->
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    });

    $('#payButton').popup({
        // 绑定id //点击 //在指定位置出现
        popup: $('.payQR.popup'),
        on: 'click',
        position: 'bottom center'
    });
    $('.ui.form').form({
        fields: {
            //指定name为title区域
            title: {
                //identifier:'title',寻找name为title的框
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客标题'
                }]
            },
            nickname: {
                //identifier:'title',寻找name为title的框
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入姓名'
                }]
            },
            email: {
                //identifier:'title',寻找name为title的框
                identifier: 'email',
                rules: [{
                    type: 'empty',
                    prompt: '请输入邮箱'
                }]
            }
        }
    });

    $(function () {
        //当某一个组件失去焦点时，调用对应的校验方法
        $("#email").blur(checkEmail);
    });

    // 校验邮箱
    function checkEmail() {
        //1.获取
        var val = $("#email").val();
        console.log(val);

        //2.定义正则
        var val_email = /^\w+@\w+.\w+$/;

        //3.判断，给出提示信息
        var flag = val_email.test(val);
        console.log(flag);
        if (flag) {
            $("#email").css("border", "");
            $("#errorMsg").html("");
        } else {
            $("#email").css("border", "1px solid red");
            $("#errorMsg").html("邮箱格式错误");
        }

        return flag;
    };

    $(" #commentpost-btn").click(function () {
        var boo = $('.ui.form').form('validate form');
        if (boo) {
            console.log('校验成功');
            postData();
        } else {
            console.log('校验失败');
        }
    });

    //加载自动执行
    window.onload = postData();

    function postData() {
        console.log("sss");
        $("#comment-container").load(/*[[@{/comments}]]*/"/comments",{
            "parentComment.id" : $("[name='parentComment.id']").val(),
            "blog.id" : $("[name='blog.id']").val(),
            "nickname" : $("[name='nickname']").val(),
            "email" : $("[name='email']").val(),
            "content": $("[name='content']").val()
        }, function (responseTxt, statusTxt, xhr) {
            clearContent();
        });
    }

    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentComment.id']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息......");
    }

    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnckname');
        $("[name='content']").attr("placeholder", "@" + commentNickname).focus();
        $("[name='parentComment.id']").val(commentId);
    }

    $("#newblog-container").load(/*[[@{/footer/newblog}]]*/"/footer/newblog");


</script>
</body>
</html>